<!--关闭警情提醒历史 -->
<template>
    <div class="page createcloseReminder-page" data-page="createcloseReminder" >
        <div class="link-page-nav">
            <a href="#" class="link"  @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">创建关闭措施</div>
        </div>
        <div class="page-content" style="padding-bottom: 25px;height:calc(100% - 90px);">
            <div class="hiddenDanger-block" style="margin-top:15px">
                <div class="left-title" style="margin-left: 21px;"><span class="must-fill">*</span>所在单位</div>
                <div class="right-con  has-arrow createReminderStyle" id="crTb_resUnit_div_{{getNewId}}">
                    <div id="crTb_resUnit_{{getNewId}}" class="right-select" style="float: left;margin-left: 25px;color: #999999;">选择单位</div>
                    <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                </div>
            </div>
            <div class="hiddenDanger-block">
                <div class="left-title" style="margin-left: 21px;"><span class="must-fill">*</span>所在建筑</div>
                <div class="right-con  has-arrow createReminderStyle">
                    <div id="trouble_bulid_{{getNewId}}" class="right-select" style="float: left;margin-left: 25px;color: #999999;">选择建筑</div>
                    <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                </div>
            </div>
            <div class="hiddenDanger-block">
                <div class="left-title" style="margin-left: 21px;">消防系统</div>
                <div class="right-con  has-arrow createReminderStyle">
                    <div id="dector_type_{{getNewId}}" class="right-select" style="float: left;margin-left: 25px;color: #999999;">选择消防系统</div>
                    <i id="dector_type_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                </div>
            </div>
            <div class="hiddenDanger-block">
                <div class="left-title" style="margin-left: 21px;width: 100px;"><span class="must-fill">*</span>屏蔽用户角色</div>
                <div class="right-con  has-arrow createReminderStyle">
                    <div id="dector_people_{{getNewId}}" class="right-select" style="float: left;margin-left: 25px;color: #999999;">选择角色</div>
                    <i id="dector_people_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                </div>
            </div>
            <div class="rdsp-inner-content is-stop hiddenDanger-block" id="id-is-stop1_{{getNewId}}">
                <div class="left-title" style="margin-left: 21px;width: 100%;"><span class="must-fill">*</span>值班时间段<span class="time_remind">请设置在24小时以内</span></div>
                <div id="id-start-stop-time_{{getNewId}}" class="hiddenDanger-block start-stop-time" style="width: 100%;height: 20px;margin-top: 32px;">
                    <div class="fl" style="margin-left: 21px;width: 70px;">开始时间</div>
                    <div class="right-con has-arrow">
                        <div id="start_stop_time_{{getNewId}}" class="right-select" style="color: #999999;text-align: left;">请选择开始时间</div>
                        <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                    </div>
                </div>
                <div id="id-end-stop-time_{{getNewId}}" class="hiddenDanger-block end-stop-time" style="width: 100%;height: 20px;margin-top: 32px;">
                    <div class="fl" style="margin-left: 21px;width: 70px;">结束时间</div>
                    <div class="right-con has-arrow">
                        <div id="end_stop_time_{{getNewId}}" class="right-select" style="color: #999999;text-align: left;">请选择结束时间</div>
                        <i id="crTb_resUnit_icon_{{getNewId}}" class="iconfont icon-zuo"></i>
                    </div>
                </div>
            </div>
            <div class="rdsp-inner-content hiddenDanger-block" style="margin-top: 15px;">
                <div class="left-title"><span class="must-fill">*</span>事由</div>
                <div class="hiddenDanger-block" style="margin-top: 15px;">
                    <div class="right-con">
                        <textarea id="troubleText_{{getNewId}}" class="right-con-textarea cancle-ios-write" placeholder="请输入事由"></textarea>
                    </div>
                </div>
            </div>
            <div class="rdsp-fix-botttom btn2" @click="savaReminder()">
                <span>完成</span>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .hiddenDanger-block-item {
        height: 40px;
        border-radius: 4px;
        margin: 10px 20px;
        border: 1px solid rgba(208, 208, 208, 1);
        color: #999999;
        line-height: 40px;
        padding-left: 20px;
    }

    .hiddenDanger-block-item .hiddenDanger-block-circle {
        width: 12px;
        height: 12px;
        border: 1px solid rgba(169, 169, 169, 1);
        border-radius: 50%;
        display: inline-block;
        margin-right: 15px;
    }

    .hiddenDanger-block-item.block-active {
        border: 1px solid rgba(36, 113, 202, 1);
        color: rgba(36, 113, 202, 1);
    }

    .hiddenDanger-block-item .hiddenDanger-block-circle.circle-active {
        background: rgba(36, 113, 202, 1);
    }
    .hiddenDanger-block{
        margin-top: 15px;
    }
    .time_remind{
        font-size: 12px;
        color: #E54C2E;
        float: right;
        margin-right: 42px;
    }
    .createReminderStyle{
        height: 30px;
    }
</style>
<script>
return {
    mounted() {
    },
    beforeCreate() {
        var self = this;
        var $ = self.$;
    },
    data: function() {
        return {
            selectOptionOrg : "",
            flagCause:false,
            getNewId: (new Date()).getTime(),
            selectOptionDec : "",
            stopStartTimeStr:'',
            stopEndTimeStr:'',
            chargeBuildId:'',
            decterSystemId:'',
            chargeCompany:'',
            idList:[],
            nameList:[],
            otherIds:[],
            flag:0,
        }
    },
    methods: {
        savaReminder(){
            let self = this;
            if(self.chargeCompany !=='' && self.chargeBuildId!=='' && self.stopStartTimeStr!=='' && self.stopEndTimeStr!=='' && $("#troubleText_" + self.getNewId).val()!=='' && String(self.idList) !==''){
                self.flag++;
                if(self.flag == 1){//防止点击间隔
                    Dao.saveOrUpdatePoliceCloseRecord({
                    orgId:self.chargeCompany,
                    systemId:self.decterSystemId,
                    fbsId:self.chargeBuildId,
                    shieldRoleIds:String(self.idList),//ids,
                    pushRoleIds:String(self.otherIds),
                    beginTime:self.stopStartTimeStr,
                    endTime:self.stopEndTimeStr,
                    remark:$("#troubleText_" + self.getNewId).val(),
                    createAccount:userInfor.accountName,
                    }, function (data) {
                        app.methods.backToTab();
                    // jQuery("#showDialog").removeClass('dialog')
                    })
                }
            }else{
                app.methods.showToastCenter('请输入必填项');
            }
            
        },
        //选择业主单位
        select_unit: function () {
            var self = this;
            loadSelectUnitFunc(function (data) {
                if (self.chargeCompany == data.orgId) {
                    $("#crTb_resUnit_" + self.getNewId).removeClass("select_color");
                    $("#crTb_resUnit_" + self.getNewId).addClass("right-select");
                    $("#crTb_resUnit_" + self.getNewId).html("请选择责任单位");
                    $("#trouble_bulid_" + self.getNewId).html("请选择所在建筑");
                    self.chargeCompany = 0;
                } else {
                    //重新选择单位后清除建筑物的选择
                    if (data.orgName != $("#crTb_resUnit_" + self.getNewId)[0].innerText) {
                        $("#trouble_bulid_" + self.getNewId).html("请选择所在建筑")
                    }
                    //选择单位赋值
                    $("#crTb_resUnit_" + self.getNewId).removeClass("right-select");
                    $("#crTb_resUnit_" + self.getNewId).addClass("select_color");
                    $("#crTb_resUnit_" + self.getNewId).html(data.orgName);

                    self.chargeCompany = data.orgId;
                }
            }, self.chargeCompany);
        },
        //选择建筑
        select_build: function () {
            var self = this;
            if (self.chargeCompany) {
                loadSelectBuildFun(self.chargeCompany, function (data) {
                    self.chargeBuildId = data.buildId;
                    self.buildName = data.buildName;
                    $("#trouble_bulid_" + self.getNewId).html(data.buildName);
                });
            } else {
                app.methods.showToastCenter('请先选择业主单位');
            }
        },
        getOrganizationId:function(){
            var self = this;
            var $ = self.$;
            let unitListDatas = JSON.parse(sessionStorage.getItem('unitListData'))
            $("#crTb_resUnit_" + self.getNewId).empty();
            $("#crTb_resUnit_" + self.getNewId).append(unitListDatas[0].name);
            self.chargeCompany = userInfor.organizationIds;
            $("#crTb_resUnit_icon_" + self.getNewId).hide();
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            let selectOptionDecEltype = "";
            let dataType=2;
            let endTime;
            jQuery("#id-start-stop-time_"+self.getNewId).off().click(function(e) {
                loadSelectedDate_Fn(1,function(data){
                    let newData = data.singleDate.split("  ");
                    let transTimeYMDH = newData[0] + " " + newData[1].slice(0,5);
                    let transTimeYMDH00 = newData[0] + " " + newData[1].slice(0,5) + ":00";
                    $("#start_stop_time_"+self.getNewId).html(transTimeYMDH);
                    self.stopStartTimeStr=transTimeYMDH00;
                    //天数加1天时间不能超过24小时
                    let arr = self.stopStartTimeStr.split(/[- : \/]/); 
                    let d = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
                    d.setDate(d.getDate()+1)
                    let m=d.getMonth()+1; 
                    endTime = d.getFullYear()+'-'+m+'-'+d.getDate()+ " " + newData[1].slice(0,5) + ":00";
                });
            });
            jQuery("#id-end-stop-time_"+self.getNewId).off().click(function(e) {
                if(self.stopStartTimeStr){
                    loadSelectedDate_Fn(1,function(data){
                        let newData = data.singleDate.split("  ");
                        let transTimeYMDH = newData[0] + " " + newData[1].slice(0,5);
                        let transTimeYMDH00 = newData[0] + " " + newData[1].slice(0,5) + ":00";
                        if(moment(transTimeYMDH).isBefore(endTime)){
                            if(moment(self.stopStartTimeStr).isBefore(transTimeYMDH)){
                                $("#end_stop_time_"+self.getNewId).html(transTimeYMDH);
                                self.stopEndTimeStr=transTimeYMDH00;
                            }else{
                                app.methods.showToastCenter('开始时间大于结束时间，请重新选择');
                            }
                        }else{
                            app.methods.showToastCenter('屏蔽时间应该小于24小时，请重新选择');
                        }
                        
                    });
                }else{
                    app.methods.showToastCenter('请先选择开始时间');
                }
            });
            if (userInfor.isMuilUnitUser == 0) { //单
                $("#crTb_resUnit_" + self.getNewId).empty();
                $("#crTb_resUnit_" + self.getNewId).append(userInfor.org.name);
                self.chargeCompany = single_Orgid;
                $("#crTb_resUnit_icon_" + self.getNewId).hide();
            } else {
                let organizationId = userInfor.organizationIds.split(',')
                if(organizationId.length>1){
                    //选择单位
                    $("#crTb_resUnit_" + self.getNewId).parent().on('click',function(){
                        self.select_unit();
                    });
                }else{
                    self.getOrganizationId()
                }
                
            }
            //选择建筑物
            $("#trouble_bulid_" + self.getNewId).parent().on('click',function(){
                self.select_build();
            })
            //选择消防系统
            jQuery("#dector_type_" + self.getNewId).parent().on('click',function(e){
                if (self.chargeCompany) {
                    loadSelectSystem(self.chargeCompany,function(data){
                        //选中
                        selectOptionDecEltype = data.type;
                        if(self.selectOptionDec != data.dectorId||dataType!=selectOptionDecEltype){
                            self.selectOptionDec = data.dectorId;
                            if(data.type==1){
                                self.decterSystemId=data.dectorId;
                                self.fcfCategoryId=-1;
                                dataType=1;
                            }else{
                                self.decterSystemId=-1;
                                self.fcfCategoryId=data.dectorId;
                                dataType=2;
                            }
                            jQuery("#dector_type_" + self.getNewId).html(data.dectorName);
                            //jQuery("#dector_type_" + self.getNewId).addClass('select-active');
                        } else {
                            self.selectOptionDec = "";
                            self.decterSystemId=-1;
                            self.fcfCategoryId=-1;
                            jQuery("#dector_type_" + self.getNewId).html("设备类别");
                            //jQuery("#dector_type_" + self.getNewId).removeClass('select-active');
                        }
                    },false,self.selectOptionDec,selectOptionDecEltype,dataType);
                }else{
                    app.methods.showToastCenter('请先选择业主单位');
                }
            });
            //选择角色
            jQuery("#dector_people_" + self.getNewId).parent().on('click',function(e){
                if(!getClickEnabel()) return
                Dao.getUnitRoles({}, function (res) {  
                    let peopleList = res;
                    let otherIdList = []
                    for(var i = 0;i<peopleList.length;i++){
                        otherIdList.push(peopleList[i].id)
                    }
                    if (self.chargeCompany) {
                        loadSelectPeople(peopleList,self.idList,function(data){
                            //选中
                            for(var i=0;i<self.idList.length;i++){
                                jQuery("#input"+self.idList[i]).prop("checked", true);
                                jQuery("#rdsp-option-list"+self.idList[i]).addClass('active')
                            }
                            let idLists = []
                            let nameLists = []
                            jQuery(".rdsp-option-list-border").off().on('click', function (e) {
                                if (jQuery(e.target).hasClass('active') ||  jQuery(e.target).parent().parent().hasClass('active')) {
                                    jQuery(e.target).removeClass('active')
                                    if(jQuery(e.target)[0].innerText==""){
                                        jQuery(e.target).parent().parent().removeClass('active')
                                    }
                                    jQuery(e.target).find('input').prop("checked", false);
                                } else {
                                    if(jQuery(e.target)[0].innerText==""){
                                        jQuery(e.target).parent().parent().addClass('active')
                                    }
                                    jQuery(e.target).addClass('active')
                                    jQuery(e.target).find('input').prop("checked", true);
                                }
                            })
                            jQuery(".multipte-quit").off().on("click", function () {
                                var activeLabel = jQuery('.tab-active').children('.active');
                                for (var i = 0; i < activeLabel.length; i++) {
                                    idLists.push(jQuery(activeLabel[i]).attr('data-id'));
                                    nameLists.push(jQuery(activeLabel[i]).attr('data-name'));
                                    var index2 = otherIdList.indexOf(Number(idLists[i])); 
                                    otherIdList.splice(index2,1)
                                }
                                self.idList = idLists
                                self.nameList = nameLists
                                self.otherIds = otherIdList
                                if(self.nameList != ''){
                                    jQuery("#dector_people_" + self.getNewId).html(String(self.nameList));
                                }else{
                                    jQuery("#dector_people_" + self.getNewId).html('请选择屏蔽角色');
                                }
                                
                                app.popup.close();
                            })
                            
                        },false,self.selectOptionDec,selectOptionDecEltype,dataType);
                    }else{
                        app.methods.showToastCenter('请先选择业主单位');
                    }
                })
            });
        },
        pageAfterIn: function(e, page) {
           var self = this;
           var $ = self.$;
           indexHiddenDangerStatus=0;
           hiddenDangerListStatus=0;
        },
        pageBeforeOut: function(e, page) {
            var self = this;
            
        },
        pageBeforeRemove: function(e, page) {
          
        }

    }
}
</script>